<template>
    <div class="org_tree" :style="{ width: treeWidth + 'px' }">
        <div class="org_tree_title">
            <span v-show="state.openTree" class="text">{{ treeTitle }}</span>
            <el-icon v-show="state.openTree" class="icon" @click="shrink">
                <CaretLeft />
            </el-icon>
            <el-icon v-show="!state.openTree" class="icon" @click="expansion">
                <CaretRight />
            </el-icon>
        </div>
        <div class="org_tree_filter_text">
            <el-input v-show="state.openTree" v-model="state.filterText" clearable class="filterTextClass"
                placeholder="请输入名称" style="border-radius: 4px">
                <template #append>
                    <el-button :icon="Search" @click="search" />
                </template>
            </el-input>
        </div>
        <div class="org_tree_data">
            <el-tree ref="TreeRef" v-show="state.openTree" :data="state.data" :props="state.props"
                @node-click="handleNodeClick" node-key="id" :expand-on-click-node="false" 
                :default-expanded-keys="[userStore.deptId]" :filter-node-method="filterNode" />
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from "vue"
import { authTopTree } from '@/api/system/dept'
import { useUserStore } from '@/stores/user.js';
import { Search } from '@element-plus/icons-vue'

const userStore = useUserStore();
const TreeRef = ref(null);


const emit = defineEmits([
    'shrink', 'expansion', 'node-click'
])

const props = defineProps({
    openTree: {
        type: Boolean,
        default() {
            return true
        },
    },
    treeTitle: {
        type: String,
        default() {
            return ''
        },
    },
    treeExpansionWidth: {
        type: Number,
        default() {
            return 200
        },
    }
})

const state = reactive({
    openTree: props.openTree,
    filterText: undefined,
    data: [],
    props: {
        children: 'children',
        label: 'label',
        disabled: 'disabled'
    }
})

const treeWidth = computed(() => {
    return state.openTree ? props.treeExpansionWidth : 15
})

const filterNode = (value, data) => {
    if (!value) return true
    return data.label.includes(value)
}


const shrink = () => {
    state.openTree = false
    state.width = 15
    emit('shrink')
}
const expansion = () => {
    state.openTree = true
    state.width = props.treeWidth
    emit('expansion')
}

const handleNodeClick = (node) => {
    emit('node-click', node)
}

const getTree = () => {
    authTopTree().then(data => {
        state.data = data
    })
}

const search = () => {
    TreeRef.value.filter(state.filterText.trim())
}

// const recursion = (list, text) => {
//     console.log("list",list)
//     if (!list || list.length < 1) {
//         return
//     }
//     let arr = []
//     list.forEach(item => {
//         let childs = recursion(item.children,text)
//         let idx = item.label.indexOf(text)
//         if (childs && childs.length > 0) {
//             let json = {
//                 id: item.id,
//                 children: childs,
//             }
//             if (idx != -1) {
//                 json.label = item.label.substring(0, idx) + '<span style="color:red">' + text + '</span>' + item.label.substring(idx + text.length)
//             } else {
//                 json.label = item.label
//             }
//             arr.push(json)
//         } else {
//             if (idx != -1) {
//                 let json = {
//                     id: item.id,
//                     label: item.label.substring(0, idx) + '<span style="color:red">' + text + '</span>' + item.label.substring(idx + text.length),
//                 }
//                 arr.push(json)
//             }
//         }
//     })
//     return arr
// }

onMounted(() => {

    getTree()
})


</script>
<style scoped lang="scss">
.org_tree {
    .org_tree_title {
        height: 30px;
        background: rgb(38, 172, 116);
        color: #ffffff;
        display: flex;
        align-items: center;
        font-size: 14px;
        justify-content: space-between;

        .text {
            padding-left: 10px;
        }

        .icon {
            cursor: pointer;
        }

        .shrink {}
    }

    .org_tree_filter_text {
        margin-top: 10px;
    }

    .org_tree_data {
        margin-top: 10px;
    }
}
</style>
